<template>
  <div
    ref="root"
    class="all-full resource-box yx-center"
    tabindex="0"
    :class="{ full: qp }"
    @keyup.esc.stop="qp = false"
  >
    <videobox
      v-if="fileType === 'video'"
      ref="box"
      :play-data="playData"
      v-bind="$attrs"
    />
    <pdf
      v-else-if="fileType === 'pdf'"
      ref="box"
      :resource="resource"
    />
    <image-com
      v-else-if="fileType === 'img'"
      ref="box"
      :resource="resource"
    />
    <word
      v-else-if="
            fileType === 'word' || fileType === 'excel' || fileType === 'ppt'
        "
      ref="box"
      :resource="resource"
    />
    <unknow
      v-else
      ref="box"
      :resource="resource"
    />
    <div
      v-if="showQp"
      class="qp xy-center pointer"
      @click="qp = !qp"
    >
      <i
        v-if="!qp"
        class="iconfont iconquanjufangda"
      />
      <i
        v-if="qp"
        class="iconfont iconquanjusuoxiao"
      />
    </div>

  </div>
</template>

<script>
import { fileType, finalFileType } from "./resources";
import mixins from "./resourceShowMixins";
import videobox from "./video";
import pdf from "./pdf";
import ImageCom from "./image";
import word from "./word";
import unknow from "./unknow";

export default {
  components: { videobox, pdf, ImageCom, word, unknow },
  mixins: [mixins],
  data () {
    return {
      playData: null,
      qp: false,
      showQp: false
    };
  },
  computed: {
    fileType () {
      if (!this.resource) {
        return "unknow";
      }
      if (this.resource.type === "commonResource") {
        if (this.resource.resourceUrl.lastIndexOf(".") === -1) {
          return "unknow";
        }
        const endName = fileType(this.resource.resourceUrl);
        return finalFileType(endName);
      } else if (this.resource.type === "recordResource") {
        return "video";
      } else if (["jpg", "png", "jpeg"].includes(this.resource.type)) {
        return "img"
      } else if (["xls", "docx", "txt", "doc", "xlsx"].includes(this.resource.type)) {
        return "word"
      }
      return this.resource.type;
    }
  },
  methods: {
    show () {
      if (this.fileType === "video") {
        this.videoShow();
      }
      this.$nextTick(() => {
        this.showQp = this.$refs.box && !this.$refs.box.noQp;
      });
    },
    videoShow () {
      this.playData = {
        id: this.resource.id,
        courseId: this.resource.baseCourseId,
        chapterId: this.resource.courseChapterId,
        name: this.resource.name,
        resourceId: this.resource.resourceId
      };
    },
    keyup (e) {
      console.log("e:", e);
    }
  }
};
</script>

<style lang="scss" scoped>
.resource-box {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 9;
  transition: all 0.2s;

  &.full {
    position: fixed;
    width: 100vw;
    min-height: 100vh;
    overflow: auto;
    top: 0;
    left: 0;
    z-index: 99999999;

    .qp {
      position: fixed;
    }
  }

  .qp {
    position: absolute;
    font-size: 30px;
    width: 40px;
    height: 40px;
    color: white;
    background-color: black;
    opacity: 0.5;
    border-radius: 6px;
    bottom: 10px;
    right: 10px;
    z-index: 2;

    .el-icon-monitor {
      position: fixed;
    }
  }

  ::v-deep > * {
    overflow-y: auto;
  }
}
</style>
